<!-- 公司sop配置 -->
<template>
  <dt-modal-edit
    ref="info"
    title="任务责任人节点设置"
    :label-width="100"
    okText="确定"
    :width="800"
    :loading="loading"
    @cancelData="cancelData"
    @ok="onOk">
    <div class="taskSingle">
      <div class="taskName">任务名称：{{ currentRow.sopName }}</div>
      <span class="tips">
        <Icon type="md-alert" class="tips_icon" />
        提示：您可为任务添加“责任人”所对应的“角色”。添加后，具有对应“角色”的人员，将被设置为本任务的“任务责任人”
      </span>
      <div class="singInput">
        <Select
          v-model="currentRow.point.leaderType"
          style="width: 200px"
          :disabled="data.length > 0"
          @on-change="responsibleChange">
          <Option :value="1">单责任人</Option>
          <Option :value="2">多责任人</Option>
        </Select>
        <Select
          v-if="more != 'more'"
          v-model="currentRow.point.roleType"
          style="width: 200px"
          :disabled="data.length > 0 || loatZe"
          @on-change="moreResponsibleChange">
          <Option :value="1">前台角色</Option>
          <Option :value="2">后台角色</Option>
        </Select>
        <div class="addBtn">
          <Button type="primary" @click="responsibleAdd" :disabled="loatZe1 && data.length > 0">
            添加责任人
          </Button>
        </div>
      </div>
      <div class="downBox">
        <div class="sourceTit">
          <span>任务责任人</span>
          <span>操作项</span>
        </div>
        <div class="sourcedataCon">
          <ul>
            <li v-for="(item, index) in data" :key="index">
              <div>
                <Select v-model="item.reviewerId" style="width: 200px" @on-change="(e) => selChange(item, e)">
                  <Option :value="roleItem.reviewerId" v-for="(roleItem, _index) in roleList" :key="_index">
                    {{ roleItem.name }}
                  </Option>
                </Select>
              </div>
              <div class="upDown">
                <em @click="removeItems(item, index)">删除</em>
                <em @click="upItems(item, index)" v-if="index > 0">上移</em>
                <em @click="downItems(item, index)" v-if="index != data.length - 1">下移</em>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </dt-modal-edit>
</template>

<script>
  import sopApi from '@/biz/buildingManagement/sopConfig'
  export default {
    components: {},
    data() {
      return {
        currentRow: { point: {} },

        data: [{ reviewerName: '' }],
        roleList: [],
        removeFlag: true,
        dataLength: 0,
        loatZe: false,
        loatZe1: false,
        more: '',
        loading:false
      }
    },
    created() {
      if (this.data.length < 2) {
        this.removeFlag = false
      }
      this.dataLength = this.data.length
    },

    methods: {
      cancelData() {
        this.data = [{ reviewerName: '' }]
        this.currentRow = { point: {} }
      },
      selChange(val, e) {
        this.roleList.forEach((item) => {
          if (item.reviewerId == e) {
            val.reviewerName = item.name
            val.reviewerType = item.reviewerType
          }
        })
      },
      responsibleChange(val) {
        console.log(val, 'vbbb')
        if (val == 2) {
          this.loatZe = true
          this.currentRow.point.roleType = ''
        } else {
          this.currentRow.point.roleType = 1
          this.loatZe = false
        }

        val && this.getOptionalLeader()
      },
      moreResponsibleChange(val) {
        console.log(val, 'vvvv')
        if (val == 2) {
          this.loatZe1 = true
        } else {
          this.loatZe1 = false
        }
        this.getOptionalLeader()
      },
      responsibleAdd() {
        this.data.push({
          reviewerName: ''
        })
      },
      // 删除
      removeItems(item, index) {
        if (item.reviewerName == '') {
          this.data.splice(index, 1)
        } else {
          this.$Modal.confirm({
            title: '任务责任人删除确认 ',
            content: `<p>请确认，是否将“${item.reviewerName}”角色从“${this.currentRow.sopName}”任务的“任务责任人”中移除？</p>`,
            onOk: () => {
              this.data.splice(index, 1)
            }
          })
        }
      },
      // 上移
      upItems(item, index) {
        let update = this.data[index - 1]
        this.data.splice(index - 1, 1)
        this.data.splice(index, 0, update)
      },

      // 下移
      downItems(item, index) {
        if (index + 1 != this.data.length) {
          let downdate = this.data[index + 1]
          this.data.splice(index + 1, 1)
          this.data.splice(index, 0, downdate)
        } else {
          this.$Message.warning('已经是最后一条，不可下移!')
        }
      },
      updatePoint() {
        let params = {
          pointId: this.currentRow.point.pointId,
          leaderType: this.currentRow.point.leaderType,
          roleType: this.currentRow.point.roleType
        }
        return sopApi
          .updatePoint(params)
          .then((res) => {
            return res
          })
          .catch((err) => {})
      },
      getOptionalLeader() {
        let params = {
          pointId: this.currentRow.point.pointId
        }

        if (this.currentRow.point.leaderType == 1 && this.more != 'more') {
          params.roleType = this.currentRow.point.roleType
        }

        if (this.more != 'more') {
          params.leaderType = this.currentRow.point.leaderType
        }
        sopApi
          .getOptionalLeader(params)
          .then((res) => {
            this.roleList = res
          })
          .catch((err) => {})
      },
      getPointLeader() {
        let params = {
          pointId: this.currentRow.point.pointId
        }
        return sopApi
          .getPointLeader(params)
          .then((res) => {
            if (res && res.length) {
              this.data = res
            }

            return this.data
          })
          .catch((err) => {})
      },
      show(data, more) {
        this.more = more
        this.currentRow = JSON.parse(JSON.stringify(data))
        this.currentRow.point = JSON.parse(JSON.stringify(data.point))

        if (this.currentRow.point.roleType == 2) {
          this.loatZe1 = true
        } else {
          this.loatZe1 = false
        }

        if (this.currentRow.point && !this.currentRow.point.roleType) {
          if (this.currentRow.point.leaderType == 1) {
            this.currentRow.point.roleType = 1
          } else {
            this.currentRow.point.roleType = ''
          }
        }

        this.getPointLeader().then((res) => {
          this.getOptionalLeader()
          this.$forceUpdate()
          this.$refs.info.show()
        })
      },
      onOk() {
        this.loading = true
        this.updatePoint().then((res) => {
          this.data.forEach((item, index) => {
            item.sorted = index
          })

          let emptyFlag = this.data.some((item) => {
            return item.reviewerName == ''
          })
          if (emptyFlag) {
            this.$Message.warning('请填写或者删除已添加的责任人')
            return false
          }
          let arr = []
          this.data.forEach((item) => {
            arr.push(item.reviewerId)
          })
          if (Array.from(new Set(arr)).length < arr.length) {
            this.$Message.warning('责任人不能重复')
            return false
          }
          let params = {
            pointId: this.currentRow.point.pointId,

            leaderList: this.data,
            configId: this.currentRow.point.configId ? this.currentRow.point.configId : this.currentRow.id
          }
          sopApi
            .saveLeaderList(params)
            .then((res) => {
              this.$Message.success('设置成功')
              this.$emit('success', this.more)
              this.$refs.info.hide()
              this.loading = false
            })
            .catch((err) => {})
        })
      }
    }
  }
</script>
<style lang="scss" scoped>
  .singInput {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin: 10px auto;

    .addBtn {
      width: 40%;
      text-align: right;
    }
  }
  .taskName{
    font-size: 16px;
    margin-bottom: 10px;
  }

  .downBox {
    border: 1px solid #e8e8e8;
    padding: 20px;
    margin-top: 10px;
  }

  .tips {
    padding: 5px 10px;
    text-align: right;
    line-height: 32px;
    font-size: 14px;
    background: rgba(254, 252, 236, 1);

    .tips_icon {
      font-size: 20px;
      color: #0f42a7;
      vertical-align: sub;
    }
  }

  .sourceTit {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid #e8e8e8;
  }

  .sourcedataCon {
    max-height: 400px;
    // min-height: 250px;
    height: 400px;
    overflow-y: auto;
    // border: 1px solid #e8eaec;
    border-top: 0px;

    ul > li {
      margin: 0;
      line-height: normal;
      padding: 7px 0px;
      clear: both;
      color: #515a6e;
      font-size: 14px !important;
      white-space: nowrap;
      list-style: none;
      display: flex;
      flex-direction: row;
      position: relative;

      input {
        margin-top: 1px;
        cursor: pointer;
      }

      label {
        margin: 0 4px;
        cursor: pointer;
        min-width: 120px;
      }

      .upDown {
        position: absolute;
        right: 5px;
        cursor: pointer;

        em {
          color: #0f42a7;
          font-style: normal;
        }
      }
    }
  }
</style>
